<template>
  <div id="activityPages">
    <div class="head" style="">
      <i class="el-icon-arrow-left" @click="toActionShow"></i>
      <p>活动展示页</p>
    </div>
    <div class="container">
      <div class="container-img">
        <el-image
          v-if="activityPhoneImg"
          :src="activityPhoneImg"
          class="avatar"
          fit="cover"
          :onError="errorImg"
        />
        <el-image
          v-else
          :src="imgSrc"
          class="avatar"
          fit="cover"
          :onError="errorImg"
        />
      </div>
      <div class="center">
        <span id="time">活动倒计时：6天23时20分</span>
      </div>
      <div class="footer">
        <div>{{ phoneDescribe }}</div>
        <div class="btn">
          活动详情》
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import defaultImg from '@assets/img/phoneActivity.png'
export default {
  name: 'activityPages',
  msg: '',
  data() {
    return {}
  },
  computed: {
    ...mapState(['phoneDescribe', 'activityPhoneImg']),
    imgSrc() {
      return this.$store.activityPhoneImg || defaultImg
    }
  },
  mounted() {},
  methods: {
    errorImg() {
      return 'this.src=' + require('@assets/img/phoneActivity.png')
    },
    /*跳转活动展示-手机*/
    toActionShow() {
      this.$emit('changePhone', 'actionShowPhone')
    }
  }
}
</script>

<style lang="less">
#activityPages {
  .head {
    width: 100%;
    border: 0px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    i {
      cursor: pointer;
    }
  }
  .head p {
    display: inline-block;
    margin-left: 10px;
  }
  .center {
    font-size: 12px;
    padding: 5px 5px 0;
  }
  .container-img {
    position: relative;
    cursor: pointer;
    .avatar {
      width: 100%;
      height: 100px;
    }
  }
  .footer {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    padding: 10px 5px;
    .btn {
      flex: none;
      color: #0cb65b;
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
